<script lang="ts" setup>
	import { computed, inject } from 'vue';

	interface Props {
		span ?: number
		flex ?: string
	}

	const parentProps = inject<any>("parentProps")
	const props = withDefaults(defineProps<Props>(), {
		span: 0
	})

	const className = computed(() => {
		const map = { 'x-col': true }
		if (props.span > 0) {
			map['x-col-' + props.span] = true
		}
		return map
	})

	const style = computed(() => {
		const defaults : any = {
			paddingLeft: parentProps.gutter / 2 + "rpx",
			paddingRight: parentProps.gutter / 2 + "rpx",
		}
		if (props.flex) {
			if (props.flex === "auto") {
				defaults.flex = "1"
			} else {
				defaults.width = props.flex
			}
		}
		return defaults
	})
</script>

<template>
	<view :class="className" :style="style">
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
	@use "sass:math";

	.x-col {
		float: left;
		box-sizing: border-box;
	}

	@for $i from 1 through 24 {
		.x-col-#{$i} {
			width: (math.div($i, 24) * 100%);
		}
	}
</style>